<template>
	<view class="body">
		<!-- 顶部导航 -->
		<view class="top">
			<!-- <c-scroll class="tabs-scroll" v-model="tabActive"  :data="tabData"></c-scroll> -->
			<c-tabs class="tabs-scroll" :list="tabData" title="name" v-model="tabActive"></c-tabs>
			<icon class="search" type="search" size="20" color="#000"/>
		</view>
		<view class="content">
			<!-- 推荐 -->
			<template v-if="tabActive == 0">
				<!-- 滚动autoplay -->
				<view class="c-roll">
					<swiper swiper autoplay circular :interval="3000">
						<swiper-item v-for="(item, index) in swiperData" :key="index">
							<image img :src="item.img" mode="aspectFill"></image>
							<text name>{{item.name}}</text>
						</swiper-item>
					</swiper>
				</view>
				<!-- 最近都在看 -->
				<c-type-list
					:title="hisData.title" :more="`共${hisData.sum}部`"
					:data="hisData.list" :scrollX="true"
					@click="videoHandle(item, arguments[0])" />
				<!-- 推荐分类-数据 -->
				<c-type-list v-for="(item,index) in typeData" :key="index"
					:title="item.title" :more="`共${item.sum}部`" :data="item.list"
					@click="videoHandle(item, arguments[0])" />
			</template>
			
			<!-- 电视剧 -->
			<template v-if="tabActive == 1">
				<c-type-list :data="videoData" @click="videoHandle(1, arguments[0])">
					<template #title>
						<view class="c-child-type">
							<c-scroll v-for="(item, index) in chilTypeData" :key="index"
								v-model="item.active"  :data="item.list" inline />
						</view>
					</template>
				</c-type-list>
			</template>
			<uni-load-more v-if="loading" :status="loadStatus"></uni-load-more>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 分类数据	当前分类
				tabData: [], tabActive: 0,
				// 加载
				loading: false, loadStatus: 'more',
				// 滚动图				最近观看			 推荐分类				视频列表
				swiperData: [], hisData: [], typeData: [], videoData: [],
				// 子分类
				chilTypeData: []
			}
		},
		onPullDownRefresh() { // 下拉刷新
			console.log('下拉')
			this.loading = false
			this.loadStatus = 'more'
			uni.stopPullDownRefresh();
		},
		onPageScroll() { // 滚动监听
			!this.loading && (this.loading = true)
		},
		onReachBottom() { // 上拉加载
			console.log('上拉')
			if (this.loadStatus != '') {
				this.loadStatus = 'loading'
				setTimeout(() => {this.loadStatus = ''}, 1500)
			}
		},
		onLoad() {
			// #ifdef APP-PLUS  
			plus.navigator.setFullscreen(true); // 隐藏系统-状态栏
			// #endif
			
			// this.init()
		},
		onShow() {
			this.init()
		},
		methods: {
			init() {
				// 顶部分类
				this.tabData = [
					{ id: 'a1', name: '推荐' },
					{ id: 'a2', name: '电视剧' },
					{ id: 'a3', name: '电影' },
					{ id: 'a4', name: '美剧' },
					{ id: 'a5', name: '韩剧' },
					{ id: 'a6', name: '日剧' },
					{ id: 'a7', name: '泰剧' },
					{ id: 'a8', name: '综艺' },
					{ id: 'a9', name: '动漫' },
				]
				// swiper 滚动
				this.swiperData = [
					{ id: 1, name: '釜山行2：尸速列车四年后 世界尸裂 杀到最后一秒', img: '/static/img/roll/1.jpg' },
					{ id: 2, name: '中国好声音2020：李宇春惊喜加盟 抢人战火速升级', img: '/static/img/roll/1.jpg' },
					{ id: 3, name: '达·芬奇的恶魔 第一季：天才与疯子只在一恋件', img: '/static/img/roll/1.jpg' }
				]
				// 最近都在看
				this.hisData = {
					id: 1, title: '最近都在看', sum: 7, list: [
					{ id: 1, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' },
					{ id: 2, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' },
					{ id: 3, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' },
					{ id: 4, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' },
					{ id: 5, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' },
					{ id: 6, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' }
				]}
				// 分类数据
				this.typeData = [
					{ id: 2, title: '热剧精选', sum: 80, list: [
						{ id: 1, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' },
						{ id: 2, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' },
						{ id: 3, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' },
						{ id: 4, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' },
						{ id: 5, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' },
						{ id: 6, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' }
					]},
					{ id: 3, title: '电影推荐', sum: 72, list: [
						{ id: 1, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' },
						{ id: 2, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' },
						{ id: 3, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' },
						{ id: 4, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' },
						{ id: 5, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' },
						{ id: 6, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' }
					]}
				]
				// 字分类
				this.chilTypeData = [
					{ active: 'a0', list: [
						{id: 'a0', name: '全部'},
						{id: 'a1', name: '内地'},
						{id: 'a2', name: '美国'},
						{id: 'a3', name: '韩国'},
						{id: 'a4', name: '日本'},
						{id: 'a5', name: '香港'},
						{id: 'a6', name: '泰国'},
						{id: 'a7', name: '新加坡'}
					]},
					{ active: 'a0', list: [
						{id: 'a0', name: '全部'},
						{id: 'a1', name: '古装'},
						{id: 'a2', name: '科幻'},
						{id: 'a3', name: '悬疑'},
						{id: 'a4', name: '历史'},
						{id: 'a5', name: '儿童'},
						{id: 'a6', name: '农村'},
						{id: 'a7', name: '都市'},
						{id: 'a8', name: '家庭'},
						{id: 'a9', name: '搞笑'},
						{id: 'a10', name: '偶像'},
						{id: 'a11', name: '言情'}
					]},
					{ active: 'a0', list: [
						{id: 'a0', name: '全部'},
						{id: 'a1', name: '2020'},
						{id: 'a2', name: '2019'},
						{id: 'a3', name: '2018'},
						{id: 'a4', name: '2017'},
						{id: 'a5', name: '2016'},
						{id: 'a6', name: '2015'},
						{id: 'a7', name: '2014'},
						{id: 'a8', name: '2013'},
						{id: 'a9', name: '2012'},
						{id: 'a10', name: '2011'},
						{id: 'a11', name: '2010'},
						{id: 'a12', name: '00年代'},
						{id: 'a13', name: '90年代'},
						{id: 'a14', name: '80年代'},
						{id: 'a15', name: '更早'}
					]}
				]
			},
			// 查看详情-分类
			videoHandle(node,row) {
				console.log(node)
				console.log(row)
				switch (this.tabActive) {
					case 0: { // 推荐--相关操作
						if (row) { // 查看详情
							console.log('查看详情')
						} else { // 更多分类
							const { id, title } = node
							const params = `id=${id}&title=${title}`
							uni.navigateTo({
								url: '/pages/tabs/home/list?' + params
							})
						}
					}
				}
			}
		},
		watch: {
			tabActive(v) {
				console.log(v)
				this.loading = false
				this.videoData = [
					{ id: 1, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' },
					{ id: 2, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' },
					{ id: 3, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' },
					{ id: 4, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' }
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
image{will-change: transform}
.body {
	>uni-view{margin-bottom: $uni-spacing-row-base;}
	// 分类
	.top{
		/* #ifdef APP-PLUS */
		position: fixed;
		/* #endif */
		position: sticky;
    top: 0;
		width: 100%;
    z-index: 9999;
    background-color: #fff;
		margin-bottom: 0;
		.tabs-scroll{
			width: calc(100vw - 80rpx);
		}
		.search{
			position: absolute;
			right: 0;
			top: 12rpx;
			margin-right: 20rpx;
		}
	}
	// 内容区
	.content{
		/* #ifdef APP-PLUS */
		margin-top: 80rpx;
		/* #endif */
	}
	// 滚动图
	.c-roll{
		[swiper]{height: 350rpx;}
		[img]{ width: 100%; }
		[name]{
			position: absolute;
			left: 20rpx;
			bottom: 20rpx;
			font-size: 32rpx;
			color: #fff;
		}
	}
	// 子分类
	.c-child-type{
		margin: 10rpx;
	}
}
</style>
